<template>
	<view class="wrapper">
      <view style="height: 20rpx;"></view>
      <view class="top-money">
          <view class="top-money-desc">
              <view class="top-money-desc-balance">账户余额(元)</view>
              <view class="top-money-desc-detail">资金明细</view>
          </view>
          <view class="top-money-balance">{{ promotionCenterData.accountBalance }}</view>
          <view class="top-money-option">
              <view class="top-money-option-already">已提现 {{ promotionCenterData.withdrawn }}</view>
              <view class="top-money-option-done">提现中 {{ promotionCenterData.withdrawing }}</view>
          </view>
          <view class="bottom-button">
              <view class="bottom-button-rel">提现</view>
<!--              <view class="bottom-button-rel">充值</view>-->
          </view>
      </view>

      <view class="mine-option" v-for="(item,index) in mineOptionList" :key="index" @click="toPage(item)">
          <view class="mine-option-left">
              <view class="mine-option-desc">
                  {{item.optDesc}}
              </view>
          </view>
          <view class="mine-option-right-icon" v-if="item.rightType=='icon'">
              <image class="mine-option-right-icon-img" src="/static/mineOptionNext.png"></image>
          </view>
      </view>

      <view class="effect-title">数据效果</view>

      <view class="effect-data" v-for="(item,index) in effectDataList">
        <view class="effect-data-title">
            <view class="effect-data-title-split"></view>
            <view class="effect-data-title-text">{{item.dataTitle}}</view>
        </view>
          <view class="effect-data-entity">
              <view class="effect-data-entity-item" v-for="(item1,index1) in item.dataItem">
                  <view class="effect-data-entity-item-num">{{item1.dataNum}}</view>
                  <view class="effect-data-entity-item-desc">{{item1.dataDesc}}</view>
              </view>
          </view>
      </view>

      <view class="data-pannel">
          <view class="data-pannel-title">数据看板</view>
          <view class="data-pannel-item" v-for="(item,index) in dataPannelList">
              <view class="data-pannel-item-desc">{{item.desc}}</view>
              <view class="data-pannel-item-num" v-if="item.type == 'person'">
                  <view class="data-pannel-item-num-data">{{item.data}}</view>
                  <view class="data-pannel-item-num-unit">{{item.unit}}</view>
              </view>
              <view class="data-pannel-item-num" v-if="item.type == 'plusMoney'">
                  <view class="data-pannel-item-num-data">{{item.data}}</view>
                  <view class="data-pannel-item-num-unit">{{item.unit}}</view>
                  <view class="data-pannel-item-num-unit"><view>(</view>{{item.money}}<view>)</view></view>
              </view>
              <view class="data-pannel-item-num" v-if="item.type == 'money'">
                  <view class="data-pannel-item-num-data">{{item.data}}</view>
              </view>
          </view>
      </view>
      <view style="height: 20rpx;"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
          clientHeight:'',
          clientWidth:'',
          mineData:{},
          promotionCenterData:{},
          effectData:{},
          dataPanelData:{},
          mineOptionList:[
              {id:1,optDesc:'分享二维码',rightType:'icon',rightText:''},
              {id:2,optDesc:'佣金明细',rightType:'icon',rightText:''},
              {id:3,optDesc:'我的分享列表',rightType:'icon',rightText:''},
              {id:4,optDesc:'提现列表',rightType:'icon',rightText:''},
          ],
          effectDataList:[],
          dataPannelList:[],
			}
		},
      onLoad() {
          // 初始获取尺寸
          this.updateWindowSize();

          // 监听窗口变化
          uni.onWindowResize(() => {
              this.updateWindowSize();
          });
      },
      onShow() {
          this.mineData =	uni.getStorageSync('mineData');
          this.promotionCenterData =	uni.getStorageSync('promotionCenterData');
          this.effectData =	uni.getStorageSync('effectData');
          this.dataPanelData =	uni.getStorageSync('dataPanelData');

          let arr = [
              {
                  id:1,dataTitle:'今日收益',dataItem:[
                      {id:11,dataNum:this.effectData.todayIncome.registerUser,dataDesc:'注册用户'},
                      {id:22,dataNum:this.dataPanelData.todayPay,dataDesc:'付款数'},
                      {id:33,dataNum:this.dataPanelData.todayPayMoney,dataDesc:'佣金收入'},
                  ]
              },
              {
                  id:2,dataTitle:'昨日收益',dataItem:[
                      {id:11,dataNum:this.effectData.yesterdayIncome.registerUser,dataDesc:'注册用户'},
                      {id:22,dataNum:this.dataPanelData.yesterdayPay,dataDesc:'付款数'},
                      {id:33,dataNum:this.dataPanelData.yesterdayPayMoney,dataDesc:'佣金收入'},
                  ]
              },{
                  id:3,dataTitle:'近7日',dataItem:[
                      {id:11,dataNum:this.effectData.recentWeek.registerUser,dataDesc:'注册用户'},
                      {id:22,dataNum:this.effectData.recentWeek.payNum,dataDesc:'付款数'},
                      {id:33,dataNum:this.effectData.recentWeek.commissionIncome,dataDesc:'佣金收入'},
                  ]
              },{
                  id:4,dataTitle:'近30日',dataItem:[
                      {id:11,dataNum:this.effectData.recentMonth.registerUser,dataDesc:'注册用户'},
                      {id:22,dataNum:this.effectData.recentMonth.payNum,dataDesc:'付款数'},
                      {id:33,dataNum:this.effectData.recentMonth.commissionIncome,dataDesc:'佣金收入'},
                  ]
              },
          ]
          this.effectDataList = arr;

          let pannelArr = [
              {id:1,desc:'用户总数',data:this.dataPanelData.userTotalNum,unit:'人',type:'person'},
              {id:2,desc:'会员总数',data:this.dataPanelData.vipTotalNum,unit:'人',type:'person'},
              {id:3,desc:'付费总数',data:this.dataPanelData.payTotalNum,unit:'人',type:'person'},
              {id:4,desc:'今日新增',data:this.dataPanelData.todayPay,unit:'人',type:'person'},
              {id:5,desc:'昨日新增',data:this.dataPanelData.yesterdayPay,unit:'人',type:'person'},
              {id:6,desc:'最近一小时注册',data:this.dataPanelData.lastHourRegister,unit:'人',type:'person'},
              {id:7,desc:'今日付款',data:this.dataPanelData.todayPay,unit:'笔',money:this.dataPanelData.todayPayMoney,type:'plusMoney'},
              {id:8,desc:'昨日付款',data:this.dataPanelData.yesterdayPay,unit:'笔',money:this.dataPanelData.yesterdayPayMoney,type:'plusMoney'},
              {id:9,desc:'累计付款',data:this.dataPanelData.cumPay,unit:'',type:'money'},
          ]
          this.dataPannelList = pannelArr;
          console.log('推广页面数据：',this.promotionCenterData)
      },
		methods: {
        updateWindowSize() {
            const res = uni.getSystemInfoSync();
            this.clientHeight = res.windowHeight + 'px';
            this.clientWidth = res.windowWidth + 'px';
        },
		}
	}
</script>

<style scoped lang="scss">
.wrapper {
    /*height: v-bind(clientHeight);
    width: v-bind(clientWidth);*/
    background-color: #48436C;

    .top-money {
        padding: 20rpx;
        height: 280rpx;
        width: 90%;
        margin: 20rpx auto 0;
        background: #EBC08D;
        border-radius: 10px;
        color: #34345c;
        .top-money-desc {
            display: flex;
            justify-content: space-between;
            font-size: 25rpx;
        }
        .top-money-balance {
            font-size: 70rpx;
        }
        .top-money-option {
            display: flex;
            justify-content: space-between;
            width: 40%;
            font-size: 25rpx;
        }
        .bottom-button {
            color: #EBC08D;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            font-size: 40rpx;
            .bottom-button-rel {
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 10px;
                margin-top: 30rpx;
                text-align: center;
                height: 60rpx;
                width: 100%;
                background: #D4302F;
            }
        }
    }


    .mine-option {
        height: 90rpx;
        width: 95%;
        margin: 20rpx auto 0;
        background: #373358;
        border-radius: 10px;
        display: flex;
        align-items: center;
        .mine-option-left {
            width: 70%;
            display: flex;
            align-items: center;
            margin-left: 20rpx;
            .mine-option-desc {
                color: #F0D8C6;
                margin-left: 20rpx;
                font-size: 25rpx;
            }
        }
        .mine-option-right-icon {
            width: 30%;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            .mine-option-right-icon-img {
                height: 50rpx;
                width: 50rpx;
                margin-right: 50rpx;
            }
        }
    }

    .effect-title {
        margin-top: 40rpx;
        margin-bottom: 40rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 38rpx;
        color: #F0D8C6;
    }

    .effect-data {
        background: #373358;
        border-radius: 10px;
        margin: 0 auto 40rpx;
        height: 180rpx;
        width: 89%;
        padding: 20rpx;
        .effect-data-title {
            display: flex;
            align-items: center;
            .effect-data-title-split {
                height: 35rpx;
                width: 9rpx;
                background: #F0D8C6;
            }
            .effect-data-title-text {
                margin-left: 30rpx;
                font-size: 28rpx;
                color: #F0D8C6;
            }
        }
        .effect-data-entity {
            margin-top: 40rpx;
            display: flex;
            justify-content: space-between;
            width: 90%;
            .effect-data-entity-item {

                .effect-data-entity-item-num {
                    color: #F0D8C6;
                }
                .effect-data-entity-item-desc {
                    font-size: 28rpx;
                    color: #77759C;
                }
            }
        }
    }

    .data-pannel-item:last-child {
        border-bottom: none !important;
    }
    .data-pannel {
        width: 87%;
        background: #373358;
        border-radius: 10px;
        padding: 50rpx 30rpx;
        margin: 0 auto;

        .data-pannel-title {
            color: #FCFEFB;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 37rpx;
            border-bottom: 1px solid #6F6892;
            padding-bottom: 30rpx;
        }
        .data-pannel-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 30rpx;
            border-bottom: 1px solid #6F6892;
            color: #FCFEFB;
            .data-pannel-item-num {
                display: flex;

                .data-pannel-item-num-unit {
                    display: flex;
                }
            }
        }
    }
}
</style>
